<script setup>
import { ref } from 'vue';

const msg = ref('你好世界')

// 固定写法, 暴露数据给父组件进行使用
defineExpose({msg})

// 这里是子组件, 接收父组件的props 可以使用 defineProps写法
// defineProps(['title'])
// defineProps({
//   title: String
// })
const props = defineProps({
  title: {
    type: String,
    required: true
  }
})

console.log('子组件接收到父组件的数据', props.title);

// 这里还不是子传父, 只是获取到了可以出发子传父的函数, 相当于 this.$emit
const emit = defineEmits(['myEmit'])

const handleClick = () => {
  // 这里通知父组件自定义事件名 myEmit
  // this.$emit
  // 子传父1, 触发自定义事件
  emit('myEmit', 666)
}
</script>

<template>
  <h2>{{ title }}</h2>
  <div>
    用户名 {{ msg }}
    <input type="text">
    密码
    <input type="text">
  </div>
  <button @click="handleClick">提交</button>
</template>

<style lang="scss" scoped></style>
